require("../../both/base.js")
require("./UserVideoComment.scss")

import UserCommentList from "../UserCommentList/UserCommentList.jsx"

function getCookie(name)
{
    var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
    if(arr=document.cookie.match(reg))
        return unescape(arr[2]);
    else
        return null;
}

var HtmlUtil = {
     /*1.用正则表达式实现html转码*/
        htmlEncodeByRegExp:function (str){
        var s = "";
        if(str.length == 0) return "";
            s = str.replace(/&/g,"&amp;");
            s = s.replace(/</g,"&lt;");
            s = s.replace(/>/g,"&gt;");
            s = s.replace(/ /g,"&nbsp;");
            s = s.replace(/\'/g,"&#39;");
            s = s.replace(/\"/g,"&quot;");
            return s;
        },
        /*2.用正则表达式实现html解码*/
        htmlDecodeByRegExp:function (str){
            var s = "";
            if(str.length == 0) return "";
            s = str.replace(/&amp;/g,"&");
            s = s.replace(/&lt;/g,"<");
            s = s.replace(/&gt;/g,">");
            s = s.replace(/&nbsp;/g," ");
            s = s.replace(/&#39;/g,"\'");
            s = s.replace(/&quot;/g,"\"");
            return s;
        }
};

class UserVideoComment extends React.Component{
    constructor(){
        super()

        this.state = {
            comment : ""
        }
    }

    submitComment(){
        var self = this

        if(! self.props.logined){
            return
        }

        if(self.state.comment == ""){
            toastr.waring("评论不可为空")
            return
        }

        HtmlUtil.htmlEncodeByRegExp(self.state.comment)

        var LoginToken = getCookie("LoginToken")
        const {addComment} = self.props

        fetch("/education/user/comment/add",{
            method: 'POST',
            body:   JSON.stringify({
                LoginToken,
                content : self.state.comment,
                isNote : "0",
                courseId : this.props.courseId
            }),
            headers: { 'Content-Type': 'application/json' },
            credentials : "same-origin"
        })
            .then(res => res.json())
            .then(json => {
                if(json.status !== 200){
                    toastr.error("用户已注销，请重新登录")
                    return
                }

                toastr.success("评论发表成功")
                self.setState({
                    comment : ""
                })

                // add comment in the html
                addComment(json.msg)

            }).catch((err) => {
                toastr.error("后台错误")
                self.setState({
                    comment : ""
                })
        })
        //
    }

    changeInput(name,e){
        var change = {}
        change[name] = e.target.value
        this.setState(change)
    }

    render(){
        const submitComment = this.submitComment.bind(this)
        const {addStar,totalPage,page,changePage} = this.props

        return <div className="user_video_comment bln">
            {
                (this.props.isComment && this.props.logined) ? <div className="comment_box_wr">
                    <div className="comment_box" id="commentBox">
                        <img src={this.props.avatar} className="head_img"/>
                        <div className="textarea_wr">
                            <textarea name="video_comment" id="video_comment" placeholder="扯淡、吐槽、表扬、鼓励......想说啥就说啥" value={this.state.comment} onChange={this.changeInput.bind(this,"comment")}/>
                            <div className="textarea_border"></div>
                        </div>
                    </div>
                    <div className="comment_submit" onClick={submitComment}>发表评论</div>
                </div> : null
            }
            {
                this.props.isNote && <div className="comment_tool_bar">
                    <ul>
                        <li><a href="javascript:void(0)">最新</a></li>
                        <li><a href="javascript:void(0)">点赞</a></li>
                    </ul>
                </div>
            }
            <UserCommentList changePage={changePage} totalPage={totalPage} page={page} addStar={addStar} logined={this.props.logined} comments={this.props.comments}/>
        </div>
    }
}

export default UserVideoComment